<template>
  <view class="post-card">
    <!-- 用户信息头部 -->
    <view class="post-header">
      <up-avatar :src="post.user.avatar_url" shape="circle" size="40"></up-avatar>
      <view class="user-info">
        <text class="username">{{ post.user.username }}</text>
        <text class="post-time">{{ formatTime(post.post.timestamp) }}</text>
      </view>
    </view>

    <!-- 动态内容 -->
    <view class="post-content">
      <text class="post-text">{{ post.post.content }}</text>

      <!-- 标签 -->
      <view v-if="post.tags && post.tags.length > 0" class="tags">
        <text v-for="tag in post.tags" :key="tag" class="tag">{{ tag }}</text>
      </view>
    </view>

    <!-- 图片内容 -->
    <view v-if="post.post.image_url" class="post-image">
      <image :src="post.post.image_url" mode="aspectFill" class="content-image"></image>
    </view>

    <!-- 互动数据 -->
    <view class="post-actions">
      <view class="action-item" @click="handleLike">
        <uni-icons type="heart" size="16" :color="isLiked ? '#ff4757' : '#666'"></uni-icons>
        <text class="action-count">{{ post.interactions.likes }}</text>
      </view>
      <view class="action-item" @click="handleComment">
        <uni-icons type="chatbubble" size="16" color="#666"></uni-icons>
        <text class="action-count">{{ post.interactions.comments }}</text>
      </view>
      <view class="action-item" @click="handleShare">
        <uni-icons type="redo" size="16" color="#666"></uni-icons>
        <text class="action-count">{{ post.interactions.shares }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  import relativeTime from 'dayjs/plugin/relativeTime';
  import 'dayjs/locale/zh-cn';

  // 初始化 dayjs
  dayjs.extend(relativeTime);
  dayjs.locale('zh-cn');

  const props = defineProps({
    post: {
      type: Object,
      required: true,
    },
  });

  const emit = defineEmits(['like', 'comment', 'share']);

  const isLiked = ref(false);

  // 格式化时间
  const formatTime = timestamp => {
    return dayjs(timestamp).fromNow();
  };

  // 处理点赞
  const handleLike = () => {
    isLiked.value = !isLiked.value;
    emit('like', props.post);
  };

  // 处理评论
  const handleComment = () => {
    emit('comment', props.post);
  };

  // 处理分享
  const handleShare = () => {
    emit('share', props.post);
  };
</script>

<style lang="scss" scoped>
  /* ==================== 文章卡片容器 ==================== */
  .post-card {
    background: white;
    border-radius: 12px;
    margin: 12px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

  /* ==================== 文章头部区域 ==================== */
  .post-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;

    /* 用户信息区域 */
    .user-info {
      margin-left: 12px;
      flex: 1; /* 占据剩余空间 */

      /* 用户名 */
      .username {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        display: block;
      }

      /* 发布时间 */
      .post-time {
        font-size: 12px;
        color: #999;
        margin-top: 2px;
        display: block;
      }
    }
  }

  /* ==================== 文章内容区域 ==================== */
  .post-content {
    margin-bottom: 12px;

    /* 文章文字内容 */
    .post-text {
      font-size: 14px;
      color: #333;
      line-height: 1.5;
      display: block;
      margin-bottom: 8px;
    }

    /* 标签容器 */
    .tags {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;

      /* 单个标签 */
      .tag {
        background: #f0f0f0;
        color: #666;
        padding: 4px 8px;
        border-radius: 12px;
        font-size: 12px;
      }
    }
  }

  /* ==================== 文章图片区域 ==================== */
  .post-image {
    margin-bottom: 12px;

    /* 图片样式 */
    .content-image {
      width: 100%;
      height: 200px;
      border-radius: 8px;
    }
  }

  /* ==================== 文章操作区域 ==================== */
  .post-actions {
    display: flex;
    justify-content: space-around;
    border-top: 1px solid #f0f0f0;
    padding-top: 12px;

    /* 单个操作按钮 */
    .action-item {
      display: flex;
      align-items: center;
      gap: 4px;
      padding: 8px 12px;
      border-radius: 20px;
      transition: background-color 0.2s; /* 背景色过渡动画 */

      /* 按钮点击状态 */
      &:active {
        background-color: #f0f0f0;
      }

      /* 操作数量文字 */
      .action-count {
        font-size: 14px;
        color: #666;
      }
    }
  }
</style>
